<template>
	<view class="page">
		<view class="name animated slideInLeft" v-if="current==0">
			<view class="Title">
				您的姓名是？
			</view>
			<view class="inputLine ">
				<input type="text" :value="userInfo.name" placeholder="请输入" class="md6Text" maxlength="3" />
			</view>

		</view>

		<view class="name animated slideInLeft" v-if="current==1">
			<view class="Title">
				您的性别是？
			</view>
			<view class="btnLine">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>

		</view>
		<view class="edit">
			<view class="last" @click="back">
				返回
			</view>
			
			<view class="next">
				<text @click="next" v-if="current == 0">下一步</text>
				<text v-else @tap="goUser">进入</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					sex: '',
					birth: ''
				},
				current:0,
				items: [{
						value: 'man',
						name: '男'
					},
					{
						value: 'female',
						name: '女',
						checked: 'true'
					},
				]
			};
		},

		methods: {
            back(){
				
					this.current=0
				
			},
			
			next(){
				this.current = 1
			},
			goUser(){
				uni.switchTab({
				url:'/pages/views/tabBar/user'	
				})
			}
			
		}
	};
</script>

<style scoped lang="less">
	.page {

		padding: 0 34upx;

		.name {
			padding: 60upx 0;

			.Title {
				font-size: 40upx;
				font-weight: bold;
			}

			.inputLine {
				width: 100%;
				padding: 40upx 0 20upx 0;
				border-bottom: 2upx solid #E5E5E5;

				input {
					width: 100%;
					padding-left: 20upx;
				}
			}
			
			.btnLine{
				padding: 20upx 0 20upx 10upx;
				.uni-list-cell{
					display: flex;
					margin-bottom: 20upx;
				}
			}

		
		}
		
		.edit{
			width: 100%;
			display: flex;
			justify-content: space-between;
			
			.last{
				color: #666666;
			}
			
			.next{
				color: #3f6bb0;
			}
		}
	}
</style>
